<template>
  <div class="giftlist" :class="{'pc': PC}">
    <ul v-infinite-scroll="loadMoreGifts" :infinite-scroll-disabled="loading" infinite-scroll-distance="10"
        infinite-scroll-immediate-check="false">
      <li class="gift-wrapper" v-for="(item,$index) in list" :key="$index">
        <ul class="gift-content">
          <div class="game-name">
            <div class="img">
              <img width="100%" height="100%" :src="item.icon">
            </div>
            <h1 class="title">{{item.name}}</h1>
          </div>
          <li class="detail border-1px" v-for="(i,$index) in item.children" :key="$index">
            <div class="left">
              <div class="header">
                <h1 class="title">{{i.title}}</h1>
              </div>
              <div class="message-font">
                {{i.sub_title}}
              </div>
              <mt-progress :value=i.percent|setPercent :bar-height="7" v-if="i.percent"></mt-progress>
            </div>
            <span class="btn-green" @click="receiveGift(i.code, i.code_id, i.id)">领取</span>
          </li>
        </ul>
        <split></split>
      </li>
      <div class="loading-icon-wrapper">
        <loading-icon v-if="loading"></loading-icon>
      </div>
    </ul>
    <v-footer v-show="isAll"></v-footer>
    <messagebox :gift-code="giftCode" v-if="showMessageBox"></messagebox>
  </div>
</template>

<script type="text/ecmascript-6">
  import split from '../split/split'
  import messagebox from '../../common/messagebox/messagebox'
  import LoadingIcon from '../../common/loading-icon/loading-icon'
  import VFooter from '../../common/footer/footer'

  export default {
    data() {
      return {
        giftCode: '',
        showMessageBox: false,
        page: 1,
        loading: false,
        totalList: [],
        list: [],
        isAll: false,
        noData: false,
        lastPage: ''
      }
    },
    props: {
      'loadUrl': {
        type: String
      }
    },
    watch: {
      loading: function (value) {
        if (value) {
          this.Indicator.open({
            text: '拼命加载中(⊙o⊙)...',
            spinnerType: 'fading-circle'
          })
        } else {
          this.Indicator.close()
        }
      }
    },
    methods: {
      getData() {
        this.$http.get(this.loadUrl).then((response) => {
          if (response.data.code === this.ERROR_OK) {
            this.list = response.data.data
            this.total = response.data.total
            this.totalList = this.list.length
            this.lastPage = Math.ceil(this.total / 10)
            this.isAll = false
          }
        })
      },
      receiveGift(code, codeId, giftId) {
        //判断兑换码是否被使用
        this.$http.get(`/game/index.php?m=Home&c=Api&a=judgeCode&code_id=${codeId}&gift_id=${giftId}`).then((response) => {
          if (response.data.code === this.ERROR_OK) {
            if (response.data.data.type !== 2) {
              this.giftCode = code
            }
            this.showMessageBox = true
          } else {
            this.MessageBox('提示', '服务器繁忙，请稍后再试！')
          }
        })
      },
      loadMoreGifts() {
        this.page++
        if (this.lastPage > this.page) {
          this.loading = true
          this.$http.get(this.loadUrl, {
            params: {
              page: this.page
            }
          }).then((response) => {
            if (response.data.code === this.ERROR_OK) {
              this.list = this.list.concat(response.data.data)
              this.totalList = this.list.length
              this.loading = false
            }
          })
        } else {
          this.isAll = true
          this.loading = false
        }
      }
    },
    created() {
      this.getData()
    },
    mounted() {
      this.eventBus.$on('copyOk', (status) => {
        this.showMessageBox = status
      })
    },
    filters: {
      setPercent(value) {
        if (value < 3) {
          return 3
        } else {
          return value
        }
      }
    },
    components: {
      split,
      messagebox,
      LoadingIcon,
      VFooter
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../../assets/stylus/mixin.styl"
  @import "../../../assets/stylus/main.styl"

  .giftlist
    position relative
    &.pc
      padding-bottom 1.28rem
    .gift-wrapper
      .gift-content
        padding 32px 32px 0 32px
        .game-name
          display inline-flex
          align-items center
          .title
            margin-left 16px
        .detail
          position relative
          padding-top 24px
          padding-bottom 1px
          border-1px(rgba(0, 0, 0, .2))
          &:last-child
            border-none()
          .left
            margin-bottom 24px
            .header
              display flex
              flex-direction column
              .opera
                margin-top 8px
                font-size 24px
                color #666
            .mt-progress
              width 550px
              height 10px
              .mt-progress-content
                border-radius 10px
                .mt-progress-runway
                  border-radius 10px
                .mt-progress-progress
                  border-radius 10px
            .message-font
              margin-top 15px
              line-height 32px
              width 550px
              margin-bottom 23px
    .no-more
      display block
      padding 48px 0
      text-align center
      font-size 24px
      color #999
      img
        width 112px
        height 64px
        border-radius 0
      span
        margin-top 24px
        display block
    .loading-icon-wrapper
      padding-top 40px
</style>
